This is for project 4 step 1, this is the second part. We’re going to format the text here that we have now. I’m going to select it all. I’ll put the cursor in there and do edit, select all. One of the things I want to do is make sure that the leading is consistent throughout this document. You’ll notice here that this leading is 14.4 and that it is in parentheses. A parenthesis means default, and so I’m going to change it to a number that I know, and that I can use. So I’ll make it 14 and I’ll set that so that it’s ok. It takes a little bit of leading out. Then I’m going to add a few things to the beginning of the type here. The first thing I’m going to add is the name of the website that we’re designing, which is going to be called type matters. Then I’m going to add the name of the website where we found the article. In this case it’s on “I Love Typography”. Here’s the title and I am also going to add an author name. Hopefully you have an author name. If you don’t, try to find who it is. If you don’t know who the author is, put in your name as the author. So this is John Boardly.

The next thing in here is that when you copy type from the internet, you’re going to get a lot of things. One of the things you’ll get is everything all caps. When you’re setting type in the web or InDesign, which are two major ways to set it. One ofr print and one for internet distribution. All caps can be applied with the style, and it shouldn’t be hard codded in or you shouldn’t type all caps. We can change this so that there’s the T and B are caps by going to Type, change case, and do title case. Title case leaves the first letter, the first character of each word capital. So we have the basics here.

Now what we need to do is start adding some hierarchy to this. The first thing we’re going to do is the most important thing on the page. We’ll make the title the largest. We’ll start with setting the size. We’ll set this at 48 point. Then I’ll select “I Love Typography.” I set this to one point smaller, so we have 48, and we have 36. And then we’ll have “a guide to typography” and we’ll make this a little smaller. 30. Then John Boardly, we’ll treat a little differently. I’ll leave this the same size and make it italic. There’s nothing magic about the italic, it’s just a style choice. But this one right here is another heading, this is an overall heading, meaning the basics of web as the way that this is referred to. So I’ll make this one 24. Not the leading 24, the size 24. Let’s do that. Then we’ll leave the body copy at 12. We’ll make some adjustments to this type here in a minute.

Now you’ll notice that there are some things that are a problem here. One of the problems is that the type is starting to overlap one another. You can change that with leading, and if you don’t change this to 14, then it will do auto leading. We don’t want to do auto leading today. We want to think through it and make some decisions and choices. On this one here, if you click it three times, it will select an entire line. If you go one, two, three, it will select the entire line. We want to add some space after this. We’re going to do this using the paragraph style pallet. We’ll create a new style, and call it heading 1, h1. Come to this sub menu right here, new paragraph style. Heading 1 h1. The h1, there’s nothing magical about that in InDesign, but this is something that you should pay attention to if you’re doing web work, HTML and CSS. This is something that you should know. Now we can also preview what’s happening by making sure the preview is checked. You also want to apply style to selection checked. If you start having trouble with things not being applied, you need to make sure that that is clicked.

So the basic character formats are fine. We can see that and we have minion 48 over 14. But what we want to look at most is indent and spacing. SO spacing, if we look here, there is space after. I’m going to add some additional space after. I’ll add 14 additional points after. That’s not going to be enough. I’ll do something else, that’s a multiple of 7. So we had 14, let’s try 28. We want to do p 28, which the p in front stands for points. So that gives us a little bit of space here. We’ll call that good. Now we have our first heading, heading 1 h1. We’ll do the name of the website, I just clicked on that 3 times, one, two, three. We’ll do the name of the website heading two. So we’ll do paragraph style, heading 2 h2. You should name your styles exactly the same as I’m naming them here. We need to go to indent and space again, we’re going to add more space after. In this case, let’s try 21. I’m not sure that will work. 21 worked just fine. 21 is a multiple of 7. Where I got the multiple of 7 from is the leading 14 and I halved that. So everything is going to be a multiple of 7. So 7, 14, 21, 28, 35, 42. That’s the thought process behind that. So say ok. Then we’ll go to “a guide to web typography”. This is the title of the article. Then we’ll add another heading. Paragraph style, this is going to be called heading 3 h3. Then we’ll say ok. Then this one right here is a little bit different, but I’m going to select the title. This one I’m going to call author. Then I’ll select “ok”. I didn’t add space here, so let’s make some adjustments to this, so we need some space after this. I also didn’t add space to this one here, but we’ll fix that here in a minute.

Let’s do the basics here. This is going to be our heading for our new paragraph style. Heading 4 h4. Let’s add a little space after, so we’ll go indents and space, space after, let’s put that one at 14 or p 14. That looks like too much, let’s make it smaller, p 7. That looks better, the space relationship right there. And say ok.

Let’s look over here at what we have now. You have heading 1, you can move these. If I click on this I can drag it up to the top. So let’s put these in order. Heading 1, heading 2, heading 3, heading 4, and then Author. Let’s make some adjustments here, because these two right here, heading 2 and heading 3 I have some problems with. So I’m going to select that here, double click on that, indent and spacing, we’ll add space after. Let’s try this on 7. That will work, so the space right there, that works. So I’m just pushing the tab key in order to set the style. So select ok on that. Then on author we’ll add indent and spacing. We’ll do space after and on this one let’s try 14, and that will work. They are all set here. Now we have these all set and these are all assigned. If we click here it says heading 1, heading 2, heading 3, this author, this is basic, and the main one that we’re going to be using is body copy. So let’s look at the body copy for a minute. The body copy here, we have two paragraphs, so we’re going to select the body copy to start off with, so we’ll select just a chunk of the body copy. And we’ll make a new paragraph style and call it body copy. If you’re doing this on the web, it would be called a p tag, so we’ll just put the letter p there so that we’ll remember that. Then we’ll go to indent and spacing and add spacing after. Now the spacing between paragraphs that we removed before because of the extra spaces, we want to control the space after. Generally as a place to begin, I use half the leading for the space after. So 14 was the leading. We’ll put 7 here, so p 7. And we’ll say ok. We’ll reduce this here in just a minute. After each paragraph add just a little bit of space.

Now when we look at this, there’s another heading here. You’re going to need to analyze your own content to check this out. Contrast is another heading, so we’re going to add an additional heading. Select that, new paragraph style, heading 5 h5. We want to add, in this circumstance, space before because we want a little additional space and space after. So we go to space, and we’ll do space before, let’s make space before 7 and we’ll make space after 7. The reason we’re doing that, is this paragraph here hasn’t been selected yet, but it will add an additional 7. This space right here will get added right here. We want to increase the size of the text, so basic character. We’ll increase that to 14 point. Let’s go a little bit larger, just for purposes of the assignment. We’ll select ok. Then we’ll see that that’s heading 5. Let’s move that down. This one right here, is still basic paragraph, it’s not assigned. We need to come here and click on body copy p. When you do that it added the extra space.

Let’s look at this text, we know that from here to her we need paragraph assigned, so body copy depth of paragraph. Size is similar to contrast here. If you get confused, go back to the website that you looked at. Let’s look at the way that this is organized here. So we have guide and then the basics, and then I added the author, we have the first paragraph, and then we have contrast, which is a sub head here. Then we have size which is a sup head. Then we have hierarchy which is a subhead. And space which is a sub head. So let’s go in and adjust that. We’ll adjust those. So size is a sub head, and our subheads that are the same are contrast are h5. If you use the arrow keys, you can just tab down through this. As you’re tabbing down, watch if this paragraph doesn’t have p assigned, or body copy assigned. When my paragraph style changes to basic, then I know that it’s not assigned then I can do body copy. Hierarchy is an h 5 so that’s similar to color. Then we have another body copy, and another. Then we have space here which is an h 5. This is a body copy. This is selecting everything in the paragraph. So it’s just like if I put the cursor in there and just do body copy, it will select that. Or if I just a little piece of it and do body copy, it selects the whole thing. Body copy.

There are a couple of other things that are here. This one is a note, this post is an extended version and a subscribe to “I Love Typography”. So we’ll just call both of these notes. So we’re going to make them a little bit smaller. So select this and we’ll change the point size to ten. Then we’ll add a new paragraph style not. Watch this right here. The way that I set it up, you shouldn’t have to watch this normally, but because I already assigned them a p tag, it changes so it says no paragraph style. Then we’ll select ok.

What we have now, if you look at this and double click on the hand tool so that you can see what this looks like. So we’re starting to see that we’re making some divisions in the space. We have sub heads, and we have paragraphs. We have space between the paragraphs. We also have some hierarchy that exists at the top. Now this is all tagged here, and that’s the paragraph styles. I’m going to end this one here, but you should go through and fine tune these, and make these look like you think they should look. Right now I just picked different sizes. Make some adjustments to that, as you would like. We’ll adjust more in the next step as well.